<template>
  <eTabs
    v-if="attrs"
    :key="attrs.id"
    v-model="tab"
  >
    <eTabPane
      v-for="(item, key) in attrs.configs"
      :key="key"
      :name="key"
      :label="item.label"
    >
      <PageMaking
        :key="item.id"
        :config="item"
        v-model="attrs.data[key]"
      />
    </eTabPane>
  </eTabs>
</template>

<script setup>
  import { ref, computed, watch } from 'vue'
  import useViewEditorStore from '@/store/viewEditor'

  const viewEditorStore = useViewEditorStore()
  const attrs = computed(() => viewEditorStore.selectedElement)
  const tab = ref('props')

  watch(() => attrs.value.id, () => {
    tab.value = 'props'
  })

</script>

<style lang="less" scoped>
</style>